@import '../../../style/base.styl';
.service-box
	position fixed
	top 0
	width 100%
	height 100%
	z-index 1
.container
	min-height 100vh
	box-sizing border-box
	background-image linear-gradient(#EBFFDC, #CAFFCD)
	padding 120rpx 32rpx 0
	display flex
	flex-direction column
	.title
		text-align center
		padding-top 88rpx
		padding-bottom 40rpx
		font-size 34rpx
		font-family Helvetica
		color $fontColor
	// 欢迎语
	.welcome
		margin 26rpx 0
		padding-left 30rpx
		font-size 60rpx
		line-height 60rpx
		font-weight:500
		display flex
		.name
			flex 1
			& > open-data
				margin-left 26rpx
				font-size 32rpx
				color $fontColor6
		.online-service
			margin-right 66rpx
			width 60rpx
			font-size 18rpx
			color $fontColor9
			text-align center
			line-height 18rpx
			image
				width 40rpx
				height 38rpx
	// 尝新
	.new
		background #fff
		height 100rpx
		overflow hidden
		border-radius 12rpx
		.my-swiper
			width 680rpx
			height 100rpx
			display flex
			align-items center
			.my-swiper-item
				padding 0 32rpx
				display flex
				height 100rpx !important
				align-items center
				font-size 34rpx
				& > view
					width 616rpx
					display flex
					height 100rpx !important
					align-items center
					color #ff9800
					&::after
						flex 1
						display flex
						justify-content flex-end
						content '\e654'
	.fill
		flex 1
	// 底部导航
	.nav
		display flex
		flex-wrap wrap
		padding-top 26rpx
		margin-bottom 180rpx
		.item
			margin-left 30rpx
			margin-bottom 24rpx
			text-align center
			flex 0 0 150rpx
			&:first-of-type,
			&:nth-child(5n)
				margin-left 0rpx
			& > view
				&:first-of-type
					width 150rpx
					height 150rpx
					display flex
					align-items center
					justify-content center
					padding 20rpx
					box-sizing border-box
					border-radius 20rpx
					background #fff
					box-shadow:0 6rpx 10rpx 0 rgba(126,132,156,0.1)
					&::before
						font-size 90rpx
						color #1296db
					&.cartoon
						&::before
							content '\e66b'
					&.features
						&::before
							content '\e6a4'
					&.technology
						&::before
							content '\e6dc'
					&.personal-center
						&::before
							content '\e644'
					&.canvas
						&::before
							content '\e860'
					&.echarts
						&::before
							content '\e6ae'
.contact
	background red
